<template>
	<custom-range-vue @update-between-time="handleBetweenTime" :showLeft="showLeft" :showBack="false"
		class="customRange"></custom-range-vue>
	<scroll-view class="scroll contrast" scroll-y :show-scrollbar="false">
		<view class="table-wrap"  :style="{'height':scrollHeight,'top':scrollTop}">
			<view class="tab-head flex">
				<view class="head-one bold-text">
					<text class="tab-text f-s-26">门店列表</text>
				</view>
				<view v-for="(v, i) in list" :key="i" align="center">
					<text class="bold-text">{{v.shop_alias}}</text>
				</view>
			</view>
			<view class="flex flex-col flex-ali-sta" style="align-items: stretch;">
				<view v-for="(it, idx) in keyArr" :key="idx" style="justify-content: stretch;" class="flex tab-item"
					:class="it.deepBg?'gray-bg':''">
					<template v-if="it.title">
						<view class="p-t-4 p-b-4"
							style="padding-right: 0; width: auto;border-right: none;background-color: var(--bg-center-color);">
							<view class="title-box bold-text flex">
								<text class="bold-text f-s-26">{{it.title}}</text>
								<uni-icons type="down" size="13" color="var(--white-text)"></uni-icons>
							</view>
						</view>
						<view v-for="(v, i) in list" :key="i" style="border-right: none;"></view>
					</template>
					<template v-else>
						<view class="tit-text bold-text">
							<text class="tab-text f-s-24">{{it.text}}</text>
						</view>
						<view v-for="(v, i) in list" :key="i" align="center">
							<template v-if="it.key==='fact'">
								<view class="flex flex-col flex-jus-cen">
									<text class="red-text">{{getTenTh(v.nowFact)}}</text>
									<text class="tab-text f-s-24">同期</text>
									<text class="red-text">{{getTenTh(v.beforeFact)}}</text>
									<text class="tab-text f-s-24">环比</text>
									<view class="flex">
										<view class="img-wrap flex">
											<uni-icons v-if="v.factRate>=0" type="arrow-up" size="14"
												color="#ff4b4e"></uni-icons>
											<uni-icons v-else type="arrow-down" size="14" color="#5cc94f"></uni-icons>
										</view>
										<view class="m-l-10" :class="v.factRate>0?'red-text':'green-text'">
											<text>{{Math.abs(v.factRate)}}%</text></view>
									</view>
								</view>
							</template>
							<template v-else-if="it.key==='fact_item'">
								<view class="flex flex-col flex-jus-cen">
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.factNow)}}</text>
									<text class="tab-text f-s-24">现结</text>
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.factMem)}}</text>
									<text class="tab-text f-s-24">会员</text>
									<text class="f-s-24" style="color: var(--white-text);">{{getTenTh(v.factGz)}}</text>
									<text class="tab-text f-s-24">挂账</text>
								</view>
							</template>
							<template v-else-if="it.key==='rec_item'">
								<view class="flex flex-col flex-jus-cen">
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.recCust)}}</text>
									<text class="tab-text f-s-24">消费</text>
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.recChar)}}</text>
									<text class="tab-text f-s-24">充值</text>
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.recOther)}}</text>
									<text class="tab-text f-s-24">其他</text>
								</view>
							</template>
							<template v-else-if="it.key==='free_item'">
								<view class="flex flex-col flex-jus-cen">
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.freeGift)}}</text>
									<text class="tab-text f-s-24">免单</text>
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.freeSign)}}</text>
									<text class="tab-text f-s-24">签送</text>
									<text class="f-s-24"
										style="color: var(--white-text);">{{getTenTh(v.freeOther)}}</text>
									<text class="tab-text f-s-24">其他</text>
								</view>
							</template>
							<view v-else class="f-s-24" style="color: var(--white-text);">
								{{getTenTh(v[it.key], it.needChange)}}</view>
						</view>
					</template>
				</view>
			</view>
<!--			<bottom-company-vue :footerStyle="footerStyle"></bottom-company-vue>-->
		</view>
	</scroll-view>
	<custom-loading-vue ref="loading"></custom-loading-vue>
	<tab-bar-vue :act="3"></tab-bar-vue>
</template>

<script setup>
	import tabBarVue from "@/components/tabBar.vue"
	import customRangeVue from '@/components/customRange.vue'
	import customLoadingVue from '@/components/customLoading.vue'
	import bottomCompanyVue from '@/components/bottomCompany.vue'
	import {
		nextTick,
		onMounted,
		getCurrentInstance,
		ref,
		watch
	} from 'vue'
	import {
		deepClone
	} from '@/utils/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	const loading = ref(Object)
	const instance = getCurrentInstance()
	const commonJs = instance?.proxy?.$commonJs
	const betweenTime = ref([])
	const scrollHeight = ref('0px')
	const scrollTop = ref('0px')
	const topHeight = ref(0)
	const showLeft = ref(false)
	const begin_date = ref('')
	const end_date = ref('')
	const list = ref([])
	const keyArr = [{
			title: '营业概况'
		},
		{
			text: '总消费',
			key: 'total_money'
		},
		{
			text: '营业额',
			key: 'fact',
			deepBg: true
		},
		{
			text: '营业明细',
			key: 'fact_item'
		},
		{
			text: '总收款',
			key: 'rec',
			deepBg: true
		},
		{
			text: '收款明细',
			key: 'rec_item'
		},
		{
			text: '非营业明细',
			key: 'free_item',
			deepBg: true
		},
		{
			title: '营业外收入'
		},
		{
			text: '点舞收入',
			key: 'dance',
			deepBg: true
		},
		{
			text: '香槟收入',
			key: 'champin',
			deepBg: true
		},
		{
			text: '特殊商品',
			key: 'special',
			deepBg: true
		},
		{
			title: '桌台详情'
		},
		{
			text: '实际桌数',
			key: 'true_room',
			deepBg: true,
			needChange: 'no'
		},
		{
			text: '开台总数',
			key: 'fact_room',
			deepBg: true,
			needChange: 'no'
		},
		{
			text: '开台率',
			key: 'open_rate',
			needChange: 'no'
		},
		{
			text: '桌均消',
			key: 'avg_room_money',
			deepBg: true,
			needChange: 'no'
		},
		{
			text: '散客率',
			key: 'free_rate',
			needChange: 'no'
		},
		{
			text: '销售率',
			key: 'sales_rate',
			deepBg: true,
			needChange: 'no'
		},
		{
			text: '达低消率',
			key: 'all_reach_rate',
			needChange: 'no'
		},
		{
			text: '未达低消率',
			key: 'all_no_reach_rate',
			deepBg: true,
			needChange: 'no'
		},
		{
			text: '有效开台',
			key: 'effective_rate',
			needChange: 'no'
		},
		{
			text: '无效开台',
			key: 'no_effective_rate',
			deepBg: true,
			needChange: 'no'
		}
	]

	const handleBetweenTime = (timeRange) => {
		betweenTime.value = timeRange
	}
	const getTenTh = (val, boo) => {
		if (boo == 'no') {
			return val
		}
		return (+val / 10000).toFixed(2) + '万'
	}
	watch(betweenTime, async (newValue, oldValue) => {
		if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
			getData()
		}
	}, {
		deep: true
	})
	const getData = () => {
		const params = {
			group_id: commonJs.getRequestShopId(),
			begin_date: betweenTime.value[0] + ' 12:00:00',
			end_date: betweenTime.value[1] + ' 12:00:00',
			staff_id: commonJs.getUserInfo().staff_id
		}
		commonJs.queryCache('/group/getGroupShopBusinessCompare', params, {
			before() {
				loading.value.show('加载中...')
			},
			success(res) {
				try {
					res.data.forEach(it => {
						let before = it.business_data.before
						let now = it.business_data.now
						it.total_money = now.total_money
						it.beforeFact = before.fact_money.total_money
						it.nowFact = now.fact_money.total_money
						it.factRate = it.beforeFact > 0 ? ((it.nowFact - it.beforeFact) * 100 / it
							.beforeFact).toFixed(
							2) : it.nowFact > 0 ? 100 : 0
						it.factNow = now.fact_money.money_item.now_money
						it.factMem = now.fact_money.money_item.member_money
						it.factGz = now.fact_money.money_item.gz_money
						it.rec = now.receipts_money.total_money
						it.recCust = now.receipts_money.money_item.customer_money
						it.recChar = now.receipts_money.money_item.charge_money
						it.recOther = now.receipts_money.money_item.other_money
						it.freeGift = now.free_money.money_item.gift_money
						it.freeSign = now.free_money.money_item.sign_money
						it.freeOther = now.free_money.money_item.other_money
						it.dance = now.other_income.dance
						it.champin = now.other_income.champin
						it.special = now.other_income.special
						it.true_room = now.room.true_room
						it.fact_room = now.room.fact_room
						it.open_rate = now.room.open_rate + '%'
						it.avg_room_money = now.room.avg_room_money
						it.free_rate = now.room.free_rate + '%'
						it.sales_rate = now.room.sales_rate + '%'
						it.all_reach_rate = now.room.all_reach_rate + '%'
						it.all_no_reach_rate = now.room.all_no_reach_rate + '%'
						it.effective_rate = now.room.effective_rate + '%'
						it.no_effective_rate = now.room.no_effective_rate + '%'
					})
					list.value = res.data
				} catch (error) {
					commonJs.showMessage(error)
				}
			},
			fail(err) {
				commonJs.logger.debug(err, 'error')
			},
			complete() {
				loading.value.hide()
			}
		})
	}
	onMounted(() => {
		const query = uni.createSelectorQuery().in(this);
		query.select(".customRange")
			.boundingClientRect((data) => {
				scrollTop.value = data.height + 'px'
				let topHeight = data.height + 'px'
				scrollHeight.value = `calc(100vh - ${topHeight} - 50px)`
			})
			.exec();
	})
</script>

<style lang="scss" scoped>
	.tab-text {
		color: var(--grey-text);
		font-weight: 500;
	}

	.table-wrap::-webkit-scrollbar {
		display: none;
	}

	.contrast {
		// position: absolute;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
		height: 100%;
		background: var(--bg-center-color);

		.table-wrap {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			overflow-x: auto;
			overflow-y: auto;


			// border-left: 1px solid #ececec;
			.tab-head {
				position: sticky !important;
				top: 0;
				align-items: stretch;
				z-index: 10;
				background-color: var(--bg-center-color);
				.head-one {
					z-index: 1000 !important;
				}

				&>view {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					flex: 1;
					min-width: 100px;
					min-height: 30px;
					flex-shrink: 0;
					padding: 0 24rpx;
					box-sizing: border-box;
          border-top: 1px solid var(--line-color);
					border-bottom: 1px solid var(--line-color);
					border-right: 1px solid var(--line-color);
					background-color: var(--bg-center-color);

					&:first-child {
						position: sticky !important;
						left: 0;
						top: 0;
						justify-content: flex-start;
						background-color: var(--bg-center-color);
						z-index: 100;
					}

					&:last-child {
						border-right: none;
					}
				}
			}

			.tab-item {
				align-items: stretch;

				&>view {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					flex: 1;
					min-width: 100px;
					flex-shrink: 0;
					min-height: 30px;
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					border-bottom: 1px solid var(--line-color);
					border-right: 1px solid var(--line-color);

					&:first-child {
						position: sticky;
						left: 0;
						justify-content: flex-start;
						z-index: 1;
						background-color: var(--bg-color);
					}

					&:last-child {
						border-right: none;
						// position: static !important;
						// background-color: #fff;
						// z-index: 0;
					}

					text {
						line-height: 36rpx;
					}
				}
			}

			.bold-text {
				color: var(--white-text);
				font-size: 26rpx;
				font-weight: 500;
			}

			.gray-bg {
				background-color: var(--bg-color);

				view {
					background-color: var(--bg-color) !important;
				}
			}

			.img-wrap {
				width: 20rpx;

				image {
					width: 100%;
				}
			}

			.red-text {
				color: #ff4b4e;
				font-size: 24rpx;
			}

			.green-text {
				color: #5cc94f;
				font-size: 24rpx;
			}

			.title-box {
				// position: sticky !important;
				// top: 0;
				// left: 0;
				// display: inline-block;
				// z-index: 1;

				width: 100%;

				text {
					// line-height: 20px !important;
				}

				image {
					width: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>